<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">时间类型：</span>
        <el-select size="mini" v-model="params.time_type" placeholder="请选择时间类型" @change="changeTimeType">
          <el-option v-for="item in timeTypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">开始时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.start_time"
          :type="params.time_type===1?'date':(params.time_type===2?'month':'year')"
          :value-format="params.time_type===1?'yyyy-MM-dd':(params.time_type===2?'yyyy-MM':'yyyy')"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">结束时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.end_time"
          :type="params.time_type===1?'date':(params.time_type===2?'month':'year')"
          :value-format="params.time_type===1?'yyyy-MM-dd':(params.time_type===2?'yyyy-MM':'yyyy')"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">一卡通食堂：</span>
        <el-cascader size="mini" class="large-select" v-model="params.ktcant_id" :options="canteenList" placeholder="请选择食堂"
                     :props="{ checkStrictly: true, emitPath: false, multiple: true }"
                     collapse-tags
                     clearable>
        </el-cascader>
      </div>
    </div>
    <div class="search-container">
<!--      <div class="search-wrapper">-->
<!--        <span class="label">商品分类：</span>-->
<!--        <el-select size="mini" v-model="params.cant_category_id" placeholder="请选择商品分类" @change="changeChartType">-->
<!--          <el-option v-for="item in cantCategoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--        </el-select>-->
<!--      </div>-->
      <div class="search-wrapper">
        <span class="label">统计类型：</span>
        <el-select size="mini" v-model="params.chart_type" placeholder="请选择统计类型" @change="changeChartType">
          <el-option v-for="item in chartTypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper" v-if="params.chart_type===1">
        <span class="label">图形类型：</span>
        <el-select size="mini" v-model="graphicsType" placeholder="请选择图形类型">
          <el-option v-for="item in graphicsTypes" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper" v-if="params.chart_type===2">
        <span class="label">图形类型：</span>
        <el-select size="mini" v-model="graphicsType" placeholder="请选择图形类型" @change="changeGraphicsType">
          <el-option key="bar" label="柱状图" value="bar"></el-option>
          <el-option key="line" label="折线图" value="line"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <el-button @click="getKtcantChart" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <common-chart class="common-chart more-chart" :chart-type="graphicsType" size="big" :data="chart" v-if="params.chart_type===1&&option.type===1"></common-chart>
    <common-chart class="common-chart more-chart" :chart-type="graphicsType" size="big" :data="chart1" v-if="params.chart_type===2&&option.type===2"></common-chart>
  </div>
</template>

<script>
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'YktChart',
  data () {
    return {
      option: {
        type: 1
      },
      params: {
        time_type: 1,
        start_time: null,
        end_time: null,
        ktcant_id: null,
        cant_category_id: null,
        chart_type: 1
      },
      timeTypeList: [
        {
          text: '天',
          value: 1
        },
        {
          text: '月',
          value: 2
        },
        {
          text: '年',
          value: 3
        }
      ],
      chartTypeList: [
        {
          text: '数量',
          value: 1
        },
        {
          text: '金额',
          value: 2
        }
      ],
      canteenList: [],
      cantCategoryList: [],
      graphicsType: 'bar',
      graphicsTypes: [
        {
          text: '柱状图',
          value: 'bar'
        },
        {
          text: '折线图',
          value: 'line'
        }
      ],
      data: [],
      chart: {
        name: '一卡通统计分析',
        title: '',
        xAxis: [],
        legend: []
      },
      chart1: {
        name: '一卡通统计分析',
        series: [],
        tooltip: [],
        legend: []
      },
      colors: ['#FF8955', '#FFD200', '#5d542a', '#EB811A', '#FF5454', '#0120EB', '#eb01d8']
    }
  },
  components: {
    CommonChart
  },
  created () {
    this.getKtCanteen()
    this.getCantCategory()
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    async getCantCategory () {
      const result = await portal.getCanteenCategory()
      if (result.data) {
        result.data.forEach(el => {
          el.label = el.name
          el.value = el.id
        })
        this.cantCategoryList = result.data
      }
    },
    async getKtCanteen () {
      const result = await portal.getKtCanteen()
      if (result.data) {
        result.data.forEach(e => {
          e.label = e.name
          e.value = e.id
          e.disabled = true
          e.children = e.child
          if (e.children) {
            e.children.forEach(el => {
              el.label = el.name
              el.value = el.id
              el.children = el.child
              if (el.children) {
                el.children.forEach(ele => {
                  ele.label = ele.name
                  ele.value = ele.id
                })
              }
            })
          }
        })
        this.canteenList = result.data
      }
    },
    changeChartType () {
      this.graphicsType = 'bar'
      this.option.type = null
      setTimeout(() => {
        this.option.type = this.params.chart_type
      })
    },
    changeTimeType () {
      this.params.start_time = null
      this.params.end_time = null
    },
    changeGraphicsType () {
      this.option.type = null
      setTimeout(() => {
        this.option.type = this.params.chart_type
        this.getKtcantChart()
      })
    },
    async getKtcantChart () {
      if (!this.params.chart_type) {
        this.$message.warning('请选择统计类型')
        return
      }
      if (!this.params.time_type) {
        this.$message.warning('请选择时间类型')
        return
      }
      if (!this.params.start_time) {
        this.$message.warning('请选择开始时间')
        return
      }
      if (!this.params.end_time) {
        this.$message.warning('请选择结束时间')
        return
      }
      if (!this.params.ktcant_id) {
        this.$message.warning('请选择一卡通食堂')
        return
      }
      const params = {
        chart_type: this.params.chart_type,
        time_type: this.params.time_type,
        start_time: this.params.start_time,
        end_time: this.params.end_time,
        ktcant_id: this.params.ktcant_id && this.params.ktcant_id.join()
      }
      const res = await portal.getKtcantChart(params)
      if (res.data) {
        const records = res.data
        const legend = []
        const xAxisData = []
        records.forEach(e => {
          xAxisData.push(e[0].time)
        })
        const series = []
        records[0].forEach((e, index) => {
          legend.push(e.cant_name)
          series.push(
            {
              type: this.graphicsType,
              name: e.cant_name,
              barWidth: '12%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: records.map(item => item[index].count)
            }
          )
        })
        if (params.chart_type === 1) {
          this.chart.series = series
          this.chart.legend = legend
          this.chart.xAxis = [
            { data: xAxisData }
          ]
        } else {
          this.chart1.series = series
          this.chart1.legend = legend
          this.chart1.xAxis = [
            { data: xAxisData }
          ]
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
